<template>
	<div class="alarm-algorithm">
		<div class="page-region">
			<div class="checkbox-card">
				<vue-scroll @handle-scroll="handlePageScroll">
					<a-checkbox-group v-model:value="checkedList" class="card-wrap" @change="onCheckboxGroupChange">
						<a-spin size="large" :spinning="exportLoading" class="loading">
							<a-empty v-if="listData?.length === 0" :image="Empty.PRESENTED_IMAGE_SIMPLE"></a-empty>
							<div class="card-list" :style="{ paddingBottom: isOpenSelect ? '190px' : '140px' }">
								<label
									:key="item.id"
									v-for="(item, index) in listData"
									:for="isOpenSelect ? item.id : ''"
									class="card-list-item"
									:class="[isOpenSelect && 'checked', { lastLine: (index + 1) % 8 == 0 }]"
									@click="handleClickItem(item, index)"
								>
									<div class="img-wrap">
										<img
											:src="item.imageUrl"
											class="lazyload"
											:onerror="
												(e: any) => {
													e.target.src = defaultImage;
													e.target.onerror = null;
												}
											"
										/>
									</div>
									<div class="info-box">
										<div class="ai-item">
											<div style="display: flex">
												<div :class="[props.status === 1 ? 'review-status-yes' : 'review-status-no']">
													{{ props.status === 1 ? '已通过' : '未通过' }}
												</div>
												<div class="ai-alarm-name">{{ item.algorithmName }}</div>
											</div>
											<div class="sence-name">{{ item.createTime }}</div>
										</div>
										<div class="info-item mt4">
											<global-svg-icon
												icon-name="location"
												width="12px"
												height="12px"
												style="margin-right: 4px; vertical-align: baseline"
											></global-svg-icon>
											{{ item.positionName }}
										</div>
										<div class="bottom-info">
											<div class="info-item">
												<global-svg-icon
													icon-name="camera-fill"
													width="12px"
													height="12px"
													style="margin-right: 4px; vertical-align: baseline"
												></global-svg-icon>
												<span class="info-text">{{ item.deviceName }}</span>
											</div>

											<div class="info-item">
												<global-svg-icon
													icon-name="box-fill"
													width="12px"
													height="12px"
													style="margin-right: 4px; vertical-align: baseline"
												></global-svg-icon>

												<span class="info-text">{{ item.boxName }}</span>
											</div>
										</div>
									</div>
									<div v-show="isOpenSelect" class="right-top" @click.stop>
										<a-checkbox :id="'' + item.id" :value="item.id"></a-checkbox>
									</div>
								</label>
							</div>
						</a-spin>
					</a-checkbox-group>
				</vue-scroll>
				<div class="suspend">
					<div v-if="isOpenSelect" class="suspend-operate">
						<div class="suspend-operate-select">
							<a-checkbox v-model:checked="checkAll" :indeterminate="indeterminate" @change="handleCheckAll">全选本页</a-checkbox>
							<span></span>
							<p :style="{ color: checkedList.length > 0 ? 'rgba(240, 246, 252, 1)' : 'rgba(48, 93, 194, 1)' }">
								已选中{{ checkedList.length }}条
							</p>
						</div>
						<span class="export-line"></span>
						<div class="suspend-operate-btns">
							<a-button
								v-if="g6Permission.showBtn('export')"
								type="default"
								class="icon-button"
								:disabled="checkedList.length === 0 || exportDisabled"
								@click="handleExport(1)"
							>
								<global-svg-icon
									icon-name="image-edit-line"
									:color="checkedList.length !== 0 ? '#fff' : 'rgba(78, 89, 106, 1)'"
									width="16px"
									height="16px"
									style="margin-right: 4px"
								></global-svg-icon>
								导出罚单
							</a-button>
							<a-button
								v-if="g6Permission.showBtn('export')"
								type="default"
								class="icon-button"
								:disabled="checkedList.length === 0 || exportDisabled"
								@click="handleExport(0)"
							>
								<global-svg-icon
									icon-name="image-line"
									:color="checkedList.length !== 0 ? '#fff' : 'rgba(78, 89, 106, 1)'"
									width="16px"
									height="16px"
									style="margin-right: 4px"
								></global-svg-icon>
								导出原图
							</a-button>
						</div>
					</div>
					<div class="suspend-pagination">
						<a-button type="default" class="icon-button" :class="[!isOpenSelect && 'icon-select-button']" @click="handleOpenSelect">
							<global-svg-icon
								v-if="isOpenSelect"
								icon-name="arrow-down-s-line"
								width="16px"
								height="16px"
								style="margin-right: 6px"
							></global-svg-icon>
							<global-svg-icon v-else icon-name="icon-wrapper" width="16px" height="16px" style="margin-right: 6px"></global-svg-icon>

							选择
						</a-button>
						<div class="pagination">
							<global-pagination
								:current="current"
								:page-size="size"
								:total="listDataTableAttr?.total"
								:page-size-options="['50', '100', '200']"
								@change="onPaginationChange"
							></global-pagination>
						</div>
					</div>
				</div>
			</div>
		</div>
		<findings-audit-modal
			ref="alarmModalRef"
			:page-from="0"
			:show-change-original-img="true"
			:review-stuta="props.status"
			@close="closeModal"
		></findings-audit-modal>
	</div>
</template>

<script setup lang="ts" name="algorithm-hardware-alarms-table">
import { Empty } from 'ant-design-vue';
import { g6Permission } from 'glasssix-utils-ts';
import { getRealImgUrl } from '@/global-utils/base.utils';
import FindingsAuditModal from './FindingsAuditModal.vue';

import defaultImage from '@/global-assets/imgs/img-none.png';
import { AlarmCenterAPI } from '../../../api';
import { CarouselDataProps } from '../../../type';
const props = withDefaults(defineProps<TsPros>(), {
	status: 0,
	// eslint-disable-next-line no-empty-function
	tableAttr: () => {}
});

type TsPros = {
	status: string | number;
	tableAttr?: any;
};
const headerBottomBorderColor = ref('transparent');
const $message: any = inject('$message');
const handlePageScroll = (vertical: Record<string, any>): void => {
	headerBottomBorderColor.value = vertical.scrollTop > 10 ? '#20305b' : 'transparent';
};

let indeterminate = ref<boolean>(true);

/**
 * 选中的列表
 */
// 列表数据
const checkedList = ref<any[]>([]);
const checkAll = ref<boolean>(false);
const isOpenSelect = ref<boolean>(false);
const exportDisabled = ref<boolean>(false);
const alarmModalRef = ref();
const listData = ref<any>([]);
const listDataTableAttr = ref<any>([]);
// 分页处理
const current = ref<number>(1);
const size = ref<number>(50);
const onPaginationChange = (pageIndex: number, pageSize: number): void => {
	// 重置被选项
	checkAll.value = false;
	checkedList.value = [];
	console.log(pageIndex, pageSize);
	document.querySelector('.card-wrap')?.scrollTo(0, 0);
	getAlarmList(pageIndex, true, null, pageSize);
	current.value = pageIndex;
	size.value = pageSize;
};
// 全选、反选
const handleCheckAll = (e: any): void => {
	checkAll.value = e.target.checked;
	if (checkAll.value) {
		checkedList.value = listDataTableAttr.value.data.map((item: any) => item.id);
	} else {
		checkedList.value = [];
	}
};
// 选择事件
const onCheckboxGroupChange = (checkedList: any[]): void => {
	isOpenSelect.value = true;
	checkAll.value = checkedList.length === listDataTableAttr.value.data.length;
	// 未选中任何一个时不展示底部操作栏
	if (checkedList.length === 0) {
		isOpenSelect.value = false;
	}
};
const handleOpenSelect = (): void => {
	isOpenSelect.value = !isOpenSelect.value;
	checkedList.value = [];
	checkAll.value = false;
};
// 单击卡片打开弹窗
const handleClickItem = (_item: any, index: number): void => {
	if (isOpenSelect.value) {
		return;
	}
	const data = listDataTableAttr.value.data.map((item: any) => {
		return {
			id: item.id,
			tag: item.content,
			time: item.createTime,
			image: item.imageUrl,
			title: item.positionName + '-' + item.deviceName,
			securityLevel: item.securityLevel,
			downLoadLink: item.eventType === 0 ? getRealImgUrl(item.eventImg) : getRealImgUrl(item.eventFile)
		};
	}) as CarouselDataProps[];

	alarmModalRef.value?.openModal(data, index);
};
const exportLoading = ref<boolean>(false);
const handleExport = async (imageType: number): Promise<void> => {
	exportDisabled.value = true;
	try {
		exportLoading.value = true;
		const res = await AlarmCenterAPI.downloadAndExport({ alarmIdList: checkedList.value.toString(), imageType });

		exportDisabled.value = false;
		isOpenSelect.value = false;
		checkedList.value = [];
		checkAll.value = false;

		if (res.code !== 0) {
			return $message.error(res.message);
		}

		const href = window.URL.createObjectURL(new Blob([res.data?.data]));

		const a = document.createElement('a');
		a.href = href || '';

		// ${getFileSuffix(data.image)}
		const fileName = res.data?.title.split('filename=')[1];
		a.download = decodeURIComponent(fileName);
		a.click();
		a.remove();
		exportLoading.value = false;
	} catch (error) {
		exportDisabled.value = false;
		exportLoading.value = false;
	}
};

watchEffect(() => {
	if (checkedList.value) {
		indeterminate.value = !!checkedList.value.length && checkedList.value.length < listDataTableAttr.value.data.length;
	}
});

// 获取报警记录列表
const getAlarmList = async (
	current: number = 1,
	isReset: boolean = true,
	deviceIds: string | null = null,
	pageSize: number = 50
	// eslint-disable-next-line max-params
): Promise<void> => {
	try {
		exportLoading.value = true;

		let params = {
			current: current,
			areDeviceIdList: deviceIds,
			pageSize: pageSize,
			auditType: 0,
			...props.tableAttr.searchObj
		};
		let res = await AlarmCenterAPI.list(params);

		if (res.data) {
			if (isReset) {
				listData.value = res.data;
				listDataTableAttr.value = res;
			} else {
				listDataTableAttr.value = res;
				listData.value = listData.value.concat(res.data);
			}
		}
	} catch (error) {
		console.log('error', error);
	} finally {
		exportLoading.value = false;
	}
};
// 关闭弹窗
const closeModal = () => {
	getAlarmList();
};

watch(
	() => props.tableAttr.searchObj,
	() => {
		getAlarmList();
	},
	{
		deep: true,
		immediate: true
	}
);
</script>

<style lang="less" scoped>
.alarm-algorithm {
	.page-region {
		width: 100%;
		height: calc(100vh - 125px);

		.checkbox-card {
			width: 100%;
			// position: relative;
			height: 100%;
			margin-top: 20px;

			:deep(.ant-checkbox-wrapper-checked) {
				.ant-checkbox-input {
					opacity: 1 !important;
				}
			}

			:deep(.ant-checkbox) .ant-checkbox-input {
				border-color: rgba(217, 217, 219, 1) !important;
			}

			.card-wrap {
				width: 100%;
				height: 100%;
				flex: 1;

				.ant-spin-nested-loading {
					position: absolute;
					top: 12px;
					width: 100%;
					height: 100%;

					.ant-spin-dot {
						margin: 0;
					}
				}

				:deep(.ant-checkbox-inner) {
					border-color: rgba(217, 217, 219, 1) !important;
					background-color: @white !important;
				}

				:deep(.ant-checkbox-checked) {
					.ant-checkbox-inner {
						background: @primary01;
					}
				}

				.card-list {
					display: grid;
					overflow: hidden;
					width: 100%;
					height: 100%;
					padding-right: 32px;
					grid-template-columns: repeat(5, 1fr);
					grid-template-rows: repeat(2, 1fr);
					grid-column-gap: 8px;
					/* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties */
					grid-row-gap: 8px;

					.lastLine {
						margin-right: 0;
					}

					.card-list-item {
						position: relative;
						min-width: 300px;
						max-width: 355px;
						border: 1px solid transparent;
						border-radius: 8px;
						padding: 8px;
						cursor: pointer;

						.img-wrap {
							width: 100%;
							height: auto;
							min-height: 176px;
							max-height: 191px;

							> img {
								width: 100%;
								height: 100%;
								object-fit: cover;
								border-radius: 4px;
							}
						}

						.info-box {
							overflow: hidden; /* 隐藏超出容器的内容 */
							white-space: nowrap; /* 防止换行 */
							text-overflow: ellipsis; /* 当文字超出容器时显示省略号 */
							color: @text03;

							.ai-item {
								display: flex;
								margin-top: 4px;
								font-size: 12px;
								line-height: 20px;
								color: @text01;
								justify-content: space-between;

								.ai-alarm-name {
									margin-left: 8px;
									font-size: 14px;
									font-weight: 700;
									line-height: 22px;
									text-align: center;
									color: @text01;
								}

								.review-status-yes {
									border: 1px solid rgba(255, 255, 255, 0.4);
									border-radius: 4px;
									padding: 0 8px;
									font-size: 12px;
									line-height: 22px; /* 183.333% */
									text-align: center;
									color: @text01;
									background: #56c763;
								}

								.review-status-no {
									border: 1px solid rgba(255, 255, 255, 0.4);
									border-radius: 4px;
									padding: 0 8px;
									font-size: 12px;
									line-height: 22px; /* 183.333% */
									text-align: center;
									color: @text01;
									background: #f59700;
								}

								.sence-name {
									line-height: 20px;
								}
							}

							.bottom-info {
								display: flex;
								justify-content: space-between;
								align-items: center;

								.info-item {
									display: flex;
									overflow: hidden;
									max-width: 46%;
									line-height: 20px;
									text-overflow: ellipsis;
									color: @text03;
									align-items: center;
								}
							}

							.info-item {
								display: flex;
								align-items: center;
								line-height: 20px;
								color: @text03;
							}

							.mt4 {
								margin-top: 4px;
							}
						}

						.tag {
							margin-left: auto;
							border: 1px solid rgba(0, 0, 0, 0.12);
							border-radius: 4px;
							padding: 0 6px;
							font-size: 12px;
							white-space: nowrap;
							color: #d67900;
							background: rgba(245, 151, 0, 0.12);
						}

						.right-top {
							position: absolute;
							top: 6px;
							right: 8px;

							.ant-checkbox-inner {
								background: #fff !important;
							}
						}

						&:hover,
						&.checked {
							border: 1px solid #374b79;
							// background-color: #fff;
							// box-shadow:
							// 	0 2px 8px 0 rgba(37, 37, 45, 0.14),
							// 	0 1px 3px 0 rgba(37, 37, 45, 0.14);
							border-radius: 8px;
							background: radial-gradient(66.29% 107.13% at 0% 0%, rgba(38, 62, 131, 0.12) 0%, rgba(217, 217, 217, 0.02) 100%), #0f224e;
							box-shadow: 0 3px 16px 0 rgba(0, 0, 0, 0.25);

							.right-top {
								display: block !important;
							}

							&::before {
								position: absolute;
								top: 0;
								left: 0;
								width: 100%;
								height: 100%;
								content: '';
								// background-color: rgba(0, 0, 0, 0.08);
							}
						}
					}
				}
			}

			.suspend {
				box-sizing: content-box;
				position: absolute;
				bottom: 0;
				left: 0;
				z-index: 9;
				width: 100%;
				border-top: 1px solid @borderColor01;
				border-bottom-right-radius: 8px;
				border-bottom-left-radius: 8px;
				background: @background02;
				box-shadow:
					0 -1px 3px rgba(37, 37, 45, 0.14),
					0 -2px 8px rgba(37, 37, 45, 0.14);

				.suspend-operate {
					display: flex;
					align-items: center;
					height: 48px;
					border-bottom: 1px solid @borderColor01;
					padding-left: 24px;

					.suspend-operate-select {
						display: flex;
						align-items: center;
						padding-right: 24px;

						:deep(.ant-checkbox) .ant-checkbox-input {
							opacity: 0 !important;
						}

						:deep(.ant-checkbox-wrapper) {
							span {
								color: @text01 !important;
							}
						}

						p {
							font-size: 14px;
							font-weight: 400;
							color: @primary01;
						}

						span {
							display: block;
							width: 1px;
							height: 20px;
							margin: 0 24px;
							background: @borderColor02;
						}
					}

					.export-line {
						display: block;
						width: 1px;
						height: 38px;
						margin: 0 24px;
						background: @borderColor02;
					}

					.suspend-operate-btns {
						display: flex;
						height: 100%;
						padding-left: 24px;
						align-items: center;
						gap: 0 12px;

						.icon-button {
							display: flex;
							align-items: center;
						}
					}
				}

				.suspend-pagination {
					display: flex;
					height: 48px;
					padding: 0 24px;
					color: @text01;
					align-items: center;
					box-shadow: 0 -1px 8px 0 rgba(0, 0, 0, 0.25);

					.pagination {
						margin: 0 auto;
						margin-top: -10px;
					}

					.icon-select-button {
						background-color: rgba(0, 0, 0, 0.1);
					}
				}
			}
		}
	}
}
</style>
